<template>
  <view class="my-invite">
	  <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="top">
      <view class="toptop">
		  <!--#ifdef MP -->
        <view class="service">
          <view class="left">
			  <u-button  openType="share" :customStyle="{border:'none'}">
				<div class="item-icon">
				  <u--image src="https://pic.gxmore.com/FvaOpCdYOrElNqpIaif2stWRQSs5" width="58rpx"
					height="58rpx"></u--image>
				</div>
				<text>推广链接</text>  
			  </u-button>
           
          </view>
          <view class="right" @click="showHB">
            <div class="item-icon">
              <u--image src="https://pic.gxmore.com/Fgs_8dhUxAMbXWX3B4dRfK2ZqZPC" width="43rpx"
                height="58rpx"></u--image>
            </div>
            <text>生成二维码</text>
          </view>
        </view>
		<!-- #endif-->
      </view>
    </view>
    <view class="middle">
      <view class="left" @click="onJump('/pagesShare/fans/customList')">
        <div class="item-icon">
          <u--image src="https://pic.gxmore.com/FrFs3_OqKyORu8RBGZT28C2vE9f9" width="26rpx" height="30rpx"></u--image>
        </div>
        <text>我的客户</text>
        <text style="color: #929292;margin-left:80rpx ;">已邀请{{customCount}}人</text>
      </view>
      <view class="right" @click="onJump('/pagesShare/fans/supplierList')">
        <div class="item-icon">
          <u--image src="https://pic.gxmore.com/FkBc-6oV3JtpxBLJimWMZiM9beF9" width="26rpx" height="30rpx"></u--image>
        </div>
        <text>我的供应商</text>
        <text style="color: #929292;margin-left: 52rpx;">已邀请{{supplierCount}}人</text>
      </view>
    </view>
	
    <view class="bottom">
      <text class="yeji">我的业绩</text>
	  <div style="float:right;margin-right:-35rpx">
		  <u-button type="primary" :customStyle="{height:'40rpx'}" shape="circle" text="余额" :plain="true" size="small" @click="onJump('/pagesShare/index/balance')"></u-button>
	  </div>
	  
      <view v-if="list.length>0">
        <view class="performance" v-for='(item,index) in list' :key='index'>
          <text class='text1'>{{item.createdAt}}</text>
          <text class="text2">分成{{item.amount}}元</text>
        </view>
      </view>
      <view class="wuYeji" v-else>
        --暂无业绩--
      </view>
    </view>
		<u-popup :show="show" :round="10" mode="center" @close="show=false" bgColor="transparent">
			  <div style="width: 669rpx; height: 752rpx;background: #fff;text-align: center;font-size:14px;color:#929292;padding-top:100rpx;" v-if="shareUrl== ''">
				  <div class="loading">
				          <span></span>
				          <span></span>
				          <span></span>
				          <span></span>
				          <span></span>
				  </div>
				  <div style="padding-top:80rpx">
					   正在生成海报，请稍后
				  </div>
				 
			  </div>
			  <img :src="shareUrl" style="width: 669rpx; height: 752rpx;" v-else/>
			  <u-button text="保存图片"  shape="circle" type="warning"  @click="downImg" :customStyle="{marginTop:'40rpx'}"></u-button>
		</u-popup>
		<view style="position: absolute; bottom:10%; left: 100%;">
			<l-painter :is-canvas-to-temp-filePath='true' @success='getImgUrl'  @fail="fail"  ref="painter" path-type="url">
				 <l-painter-image :src="shareImage" css="width: 669rpx; height: 752rpx;"></l-painter-image>
				 <l-painter-image :src="qrCode" css="width: 160rpx; height: 160rpx;position: absolute;bottom:20rpx;right:20rpx;"></l-painter-image>
		    </l-painter>
		</view>
		
  </view>
</template>

<script>
  import { invitation } from '@/config/api2.js'
  import { shareCode } from '@/config/api.js'
  import {saveImg} from '@/plugins/utils.js'
  import store from '@/store';
  export default {
    data() {
      return {
        customCount: 0,
        supplierCount: 0,
        list: [],
        shareUrl: '',
		shareTitle:'',
		qrCode:'',
		shareImage:'',
		show:false,
      }
    },
    onLoad() {
      this.getInvitation()
	  this.getCode();
    },
	async onShareAppMessage(){
		await this.$onLaunched;
		let storeUserInfo = store.state.userInfo;
		return {
		      title: this.shareTitle,
		      path: '/pages/index/index?pcode='+storeUserInfo.promoterCode
		    }
	},
    methods: {
		showHB(){
			this.show = true;
		},
		// 下载
		downImg() {
			uni.showLoading({
			  title: '正在下载'
			});
			uni.saveImageToPhotosAlbum({
			  filePath: this.shareUrl,
			  success: () => {
			    uni.hideLoading();
			    uni.showToast({
			      title: '保存成功'
			    });
			  },
			  fail(e) {
			    uni.hideLoading();
			    tip({
			      title: '下载失败，错误原因：' + e.errMsg,
			      icon: "none"
			    });
			  }
			});
			// saveImg(this.shareUrl)	
		},
			
		getCode(){
			shareCode({shareType:'promotion'}).then((res)=>{
				this.showLime = true
				this.shareTitle = res.shareTitle;
				this.qrCode = res.qrCode;
				this.shareImage = res.shareImage;
			})
		},
      onJump(url) {
        uni.navigateTo({
          url: url
        })
      },
      getInvitation() {
        invitation({
          pageSize: 1000,
          pageNum: 1
        }).then(res => {
          this.list = res.list
          this.customCount = res.customCount
          this.supplierCount = res.supplierCount
        })
      },
      getImgUrl(e) {
		  console.log("e",e)
        this.shareUrl = e
      },
	  fail(e){
		 console.log("err",e) 
	  },
    }
  }
</script>

<style lang="scss">
	.my-invite .middle{
		/* #ifdef MP*/
		padding: 57px 26px 0;
		/* #endif */
		/* #ifdef H5*/
		padding: 20px 26px 0 !important;
		/* #endif */
	}
  @import '@/style/wmj.scss';
  .loading{
              width: 80px;
              height: 40px;
              margin: 0 auto;
              margin-top:100px;
			  letter-spacing: 5;
          }
          .loading span{
              display: inline-block;
              width: 8px;
              height: 100%;
              border-radius: 4px;
              background: lightgreen;
              -webkit-animation: load 1s ease infinite;
			  margin-right:5px;
          }
		  .loading span:last-child{
			  margin-right:0;
		  }
          @-webkit-keyframes load{
              0%,100%{
                  height: 40px;
                  background: lightgreen;
              }
              50%{
                  height: 70px;
                  margin-bottom:-15px;
				  margin-top:-15px;
                  background: lightblue;
              }
          }
          .loading span:nth-child(2){
              -webkit-animation-delay:0.2s;
          }
          .loading span:nth-child(3){
              -webkit-animation-delay:0.4s;
          }
          .loading span:nth-child(4){
              -webkit-animation-delay:0.6s;
          }
          .loading span:nth-child(5){
              -webkit-animation-delay:0.8s;
          }
</style>